<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
<script>
    // 1、获取canvas
    let ctx = document.getElementById('canvas');
    // 2、获取webgl上下文
    let gl = ctx.getContext('webgl')

    // 3、着色器源代码
    // 顶点着色器
    let VERTEX_SHADER_SOURCE = `
        // 必须要存在main函数
        void main(){
            // 要绘制的点的坐标  x y z w（齐次坐标） 最终会变成这样 x/w y/w z/w
            gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
            // 点的大小  数据类型 必须是 浮点型数据类型
            gl_PointSize = 30.0;
        }
    `;
    // 片元着色器
    const FRAGMENT_SHADER_SOURCE = `
        void main(){
            // 参数 rgba
            gl_FragColor = vec4(1.0, 0.0, 0.1, 1.0);
        }
    `;

    // 4、创建着色器
    // 创建顶点着色器
    let vertexShader = gl.createShader(gl.VERTEX_SHADER);
    // 创建片元着色器
    let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

    // 5、着色器 关联 源码
    // 指定顶点着色器源码
    gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE);
    // 指定偏远着色器源码
    gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE);

    // 6、编译着色器
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);

    // 7、创建一个程序对象
    let program = gl.createProgram();

    // 8、给程序对象指定它使用的两个着色器
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    // 将 程序对象 和 webgl关联
    gl.linkProgram(program)

    // 9、使用程序对象
    gl.useProgram(program)

    // 执行绘制
    // 要绘制的图形是什么，从那个开始， 使用几个顶点
    gl.drawArrays(gl.POINTS, 0, 1);

    // gl.drawArrays(gl.LINES, 0 ,1); //线 最少需要两个点
    // gl.drawArrays(gl.TRIANGLES, 0, 1); //三角 3个点

    // 三个点
    // 0.0 0.0 0.0 绘制成一个点
    // 0.2 0.0 0.0
    // 0.4 0.0 0.0 绘制成一个线段

    // gl.drawArrays(gl.POINTS, 0, 1);
    // gl.drawArrays(gl.LINES, 1, 2);
</script>
</html>
